<template>
  <!-- 联防队员详情 -->
  <view class="jointDefenseDetail">
    <view class="wrapper">
      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 身份信息 </view>
        </view>

        <view class="wrapper-body">
          <view class="text-picture">
            <view class="lt">
              <view class="wrapper-facility">
                <view class="facility-itemTwo">
                  <view class="textAlign label">姓名</view>
                  <view>:</view>
                  <view class="value valueName">
                    {{ detail.personName }}
                  </view>
                </view>
                <view class="facility-itemTwo">
                  <view class="textAlign label">性别</view>
                  <view>:</view>
                  <view class="value valueName">
                    {{ detail.sex == 1 ? "男" : "女" }}
                  </view>
                </view>
                <view class="facility-itemTwo">
                  <view class="textAlign label">年龄</view>
                  <view>:</view>
                  <view class="value valueName">
                    {{ idCardParse(detail.idCard, 3) }}
                  </view>
                </view>
                <view class="facility-itemTwo">
                  <view class="textAlign label">联系方式</view>
                  <view>:</view>
                  <view class="value valueName">
                    {{ detail.mobile }}
                  </view>
                </view>
                <view class="facility-itemTwo">
                  <view class="textAlign label">身份证号</view>
                  <view>:</view>
                  <view class="value valueName">
                    {{ encryptIDCard(detail.idCard) || "" }}
                  </view>
                </view>
              </view>
            </view>
            <view class="rt">
              <image :src="
                  detail.personImage
                    ? imgPrefix + detail.personImage
                    : baseImgUrl + 'queryFace-01.png'
                " mode="aspectFill" @click="
                  pvwImage([
                    detail.personImage
                      ? imgPrefix + detail.personImage
                      : baseImgUrl + 'queryFace-01.png',
                  ])
                "></image>
            </view>
          </view>

          <view class="wrapper-facility">
            <!-- <view class="facility-itemTwo">
              <view class="textAlign label">户籍地址</view>
              <view>:</view>
              <view class="value valueName">
                {{ detail.residenceDetail || "" }}
              </view>
            </view> -->
            <!-- <view class="facility-itemTwo">
              <view class="textAlign label">现居地址</view>
              <view>:</view>
              <view class="value valueName">
                {{ detail.addressDetail || "" }}
              </view>
            </view> -->
            <view class="facility-itemTwo">
              <view class="textAlign label">证件照片</view>
              <view>:</view>
              <view class="value valueName rtBlue" @click="
                  pvwImage([
                    detail.idCardImage
                      ? imgPrefix + detail.idCardImage
                      : baseImgUrl + 'queryFace-01.png',
                  ])
                ">
                查看
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 基本信息 </view>
        </view>

        <view class="wrapper-body">
          <view class="item-info">
            <view class="textAlign lt"> 政治面貌</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.politicalOutlook }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt"> 民族</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.race }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt"> 籍贯</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.nativePlace }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt"> 身高</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.height }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt"> 健康状态</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.healthStatus }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt"> 婚姻状态</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.maritalStatus || "--" }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt"> 学历</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.education || "--" }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt"> 专业</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.speciality || "--" }}
            </view>
          </view>
        </view>
      </view>

      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 工作信息 </view>
        </view>

        <view class="wrapper-body">
          <view class="item-info">
            <view class="textAlign lt"> 培训机构</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.trainingInstitutions }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt"> 培训时间</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ formatters(detail.trainingStartTime, "YY-MM-DD") }}--{{
                formatters(detail.trainingEndTime, "YY-MM-DD")
              }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt"> 执勤编号</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.dutyNumber }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt"> 发证机关</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.issuingUnit }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt"> 工作单位</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.workUnit }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt"> 录用时间</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ formatters(detail.employmentTime, "YY-MM-DD") }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="btns">
      <button class="remove-btn" type="primary" style="width: 100%" @click="detailHandle">
        删除
      </button>
    </view>
  </view>
</template>

<script>
  import {
    jointDefencePersonDetail,
    jointDefencePersonDel
  } from "@/api/home.js";
  import {
    handleClickRouter,
    Toast,
    navBack,
    pvwImage,
    hiddenInfo,
    formatters,
    idCardParse,
    encryptIDCard
  } from "@/utils/util.js";

  export default {
    name: "jointDefenseDetail",
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        detail: {},
        options: {},
        imgPrefix: uni.getStorageSync("imgPrefix"),
        allCode: uni.getStorageSync("allCode"),
      };
    },
    onLoad(options) {
      this.options = options;
      this.getList();
    },
    methods: {
      encryptIDCard,
      handleClickRouter,
      pvwImage,
      hiddenInfo,
      formatters,
      idCardParse,
      detailHandle() {
        uni.showModal({
          title: "删除",
          content: "删除后不可恢复，请谨慎操作！",
          confirmColor: "#2488F5",
          success: (res) => {
            if (res.confirm) {
              jointDefencePersonDel(this.options.id).then((res) => {
                if (res.code == 200) {
                  Toast("删除成功");
                  uni.setStorageSync("defensiveLineman", true);
                  navBack();
                  return;
                }
                Toast(res.message);
              });
            }
          },
        });
      },
      getList() {
        jointDefencePersonDetail({
          id: this.options.id
        }).then((res) => {
          if (res.code == 200) {
            this.detail = res.result;
          }
        });
      },
    },
  };
</script>

<style>
  page {
    background-color: #f9f9f9 !important;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .jointDefenseDetail {
    flex: 1;
    background-color: #f9f9f9;

    .wrapper {
      margin: 20rpx;
      overflow-y: auto;
      height: calc(100vh - 92px);

      .wrapper-item {
        margin-bottom: 1vh;
        padding: 35rpx 40rpx;
        background-color: #ffffff;
        box-shadow: 0px 3px 6px 1px rgba(123, 123, 123, 0.2);
        border-radius: 10rpx;
        width: 702rpx;

        .wrapper-body {
          padding-top: 20px;
        }

        .text-picture {
          display: flex;

          .lt {
            width: 425rpx;
            max-width: 425rpx;

            .name {
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: bold;
              margin-bottom: 17rpx;
              margin-top: 20rpx;
            }
          }

          .rt {
            width: 200rpx;
            height: 220rpx;
            margin-left: 20rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .item-info {
          display: flex;
          margin-bottom: 25rpx;

          .lt {
            height: 34rpx;
            font-size: 26rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #7b7b7b;
            // width: 110rpx;
            min-width: 110rpx;
          }

          .sign {
            color: #7b7b7b;
          }

          .rt {
            width: calc(100% - 137rpx);
            font-size: 26rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #333;
            margin-left: 6rpx;
          }

          .rtBlue {
            color: #2488f5;
          }
        }
      }

      .wrapper-bar {
        display: flex;
        justify-content: space-between;
        height: 40rpx;

        .wrapper-bartitle {
          font-size: 30rpx;
          font-weight: bold;

          text {
            display: inline-block;
            margin-left: 8px;
            color: #ababab;
            font-size: 28rpx;
          }
        }
      }
    }

    .btns {
      button {
        border-radius: 44rpx;
      }
    }
  }
</style>